<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 适配手机端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<!-- react核心库 -->
<script src="../React-js/react.development.js"></script>
<!-- 操作DOM支持库 -->
<script src="../React-js/react-dom.development.js"></script>
<!-- babel转换库  jsx-js -->
<script src="../React-js/babel.min.js"></script>


<body>
    <div id="test"></div>
    <script type="text/babel">

        //创建函数组件
        // function StateDom(params) {
        //     return <div>这是学习state属性</div>
        // }
        // ReactDOM.render(<StateDom />, document.getElementById('test'))

        // 创建类组件
        class StateDom extends React.Component {
            constructor(props) {
                // 类组件内    使用了 constructor 必须添加super
                super(props)
                this.state = { study: true }
                //解决 todayStudy 中this指向问题
				this.todayStudy = this.todayStudy.bind(this)
            }
            render() {
                // return <h1 >{this.state['study'] ? '已经' : '暂未'} 学习state属性</h1>
                return <button onClick={this.todayStudy}>  {this.state['study'] ? '已经' : '暂未'} 学习 </button>
            }
            todayStudy() {

                //changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
				//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
				//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
                console.log('今天的学习状态');

                console.log(this);

                //获取原来的isHot值
				const study = this.state.study
                //严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
                this.setState({study:!study})

                //严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
				//this.state.study = !study //这是错误的写法
            }
        }
        ReactDOM.render(<StateDom />, document.getElementById('test'))

    </script>
</body>

</html>